<template>
    <div class="main">
        <h1>性能监控</h1>
        <!-- <el-button @click="test"></el-button> -->
        <div class="data">
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>首屏时间/ATF</span>
                </div>
                <div class="target">
                    所需时间：<em>{{datas.ATF}}</em>ms
                </div>
                <div class="description">
                    首屏时间，也称用户完全可交互时间，即整个页面首屏完全渲染出来，用户完全可以交互，一般首屏时间小于页面完全加载时间，该指标值可以衡量页面访问速度
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>DNS解析时间</span>
                </div>
                <div class="target">
                    所需时间：<em>{{datas.DNSTime}}</em>ms
                </div>
                <div class="description">
                    指通过域名解析服务（DNS），将指定的域名解析成IP地址所消耗的时间
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>TCP连接耗时</span>
                </div>
                <div class="target">
                    所需时间：<em>{{datas.TCPTime}}</em>ms
                </div>
                <div class="description">
                    指浏览器和WEB服务器建立TCP/IP连接所用的时间
                </div>
            </el-card>            
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>可交互时间/TTI</span>
                </div>
                <div class="target">
                    所需时间：<em>{{datas.TTI}}</em>ms
                </div>
                <div class="description">
                    指页面 DOMContentLoaded 事件触发的开始时间，这时候页面可以交互
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>数据传输时间</span>
                </div>
                <div class="target">
                    所需时间：<em>{{datas.dataConsumeTime}}</em>ms
                </div>
                <div class="description">
                    指服务器端返回第一个字节到最后一个字节所需要的时间
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>dom解析时间</span>
                </div>
                <div class="target">
                    所需时间：<em>{{datas.DNSTime}}</em>ms
                </div>
                <div class="description">
                    指页面请求完成（responseEnd）后，到整个 DOM 解析完所用的时间，页面的复杂度决定了 DOM 解析耗时
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>资源解析时间</span>
                </div>
                <div class="target">
                    所需时间：<em>{{datas.resourceResolveTime}}</em>ms
                </div>
                <div class="description">
                    资源加载耗时
                </div>
            </el-card>            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>响应时间</span>
                </div>
                <div class="target">
                    所需时间：<em>{{datas.responseTime}}</em>ms
                </div>
                <div class="description">
                    指开始发送请求到服务器返回第一个字节所需要的时间
                </div>
            </el-card>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span>页面完全加载时间</span>
                </div>
                <div class="target">
                   所需时间：<em>{{datas.totalTime}}</em>ms
                </div>
                <div class="description">
                    页面完全加载时间
                </div>
            </el-card>


        </div>
    </div>
</template>
<script>
import store from '@/store';


export default {
    data() {
        return {
            datas: {},
        }
    },
    computed: {
        data() {
            return store.state.performance.data
        }
    },
    mounted() {
        //对象变量都是对象在内存中的地址值，普通数据变量是实际的值。所以打印的那个对象其实在打印的那一刻是空对象，但是展开的时候，commit操作已经完成，所以对象被扩展为期望看到的值。但是普通类型打印的那一刻是什么就是什么。

        setTimeout(() => {
            this.showData();
        }, 0);

        console.log(window.name);
    },
    methods: {
        showData() {
            let data = this.data
            let datas = {
                totalTime: data.loadEventEnd - data.startTime,//页面完全加载时间
                DNSTime: data.domainLookupEnd - data.domainLookupStart,//DNS解析时间
                TCPTime: data.connectEnd - data.connectStart,//建立TCP/IP所需时间
                responseTime: data.responseStart - data.requestStart,//指开始发送请求到服务器返回第一个字节所需要的时间
                dataConsumeTime: data.responseEnd - data.responseStart,//指服务器端返回第一个字节到最后一个字节所需要的时间
                domResolveTime: data.domContentLoadedEventEnd - data.responseEnd,//指页面请求完成（responseEnd）后，到整个 DOM 解析完所用的时间，页面的复杂度决定了 DOM 解析耗时
                resourceResolveTime: data.loadEventEnd - data.domContentLoadedEventEnd,//资源加载耗时
                TTI: data.domInteractive - data.startTime,//首次交互时间
                ATF: data.ATF,//白屏时间
            }
            this.datas = datas;
            console.log(this.datas);
        }
    },
}
</script>
<style scoped>
.main{
    width: 90%;
    margin: 50px auto;
}
.data{
    display: grid;
    grid-template-columns: auto auto ;
}
.box-card{
    margin: 30px;
}
.target{
    padding: 0 10px;
    margin-bottom: 10px;
}
em{
    color: rgb(252, 144, 22);
    font-weight: 600;
    font-size: x-large;
    margin: 0 20px;
}
.description{
    font-size: smaller;
    color: darkgray;
    margin: 20px 10px;
}
span{
    /* 标题 */
    font-weight: 700;
    /* font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif; */
    font-size: large;
}
</style>
    